<template>
  <el-table :data="tableData" :span-method="spanMethod" border style="width:  80%">
    <el-table-column prop="name" label="保单年度">
    </el-table-column>
    <el-table-column prop="proportion" label="缴费年限" width="120">
    </el-table-column>
    <el-table-column prop="ingredients" label=" 费率维度" width="120">
    </el-table-column>

    <el-table-column label="嘉多保重大疾病" width="100">
      <el-table-column prop="value1" label="基础服务" width="120">
      </el-table-column>
      <el-table-column prop="value2" label="入账实时活动[复制]" width="120">
      </el-table-column>
    </el-table-column>

    <el-table-column label="康保无忧恶性肿瘤" width="100">
      <el-table-column prop="value3" label="基础服务" width="120">
      </el-table-column>
      <el-table-column prop="value4" label="入账实时活动[复制]" width="120">
      </el-table-column>
    </el-table-column>

    <el-table-column label="附加投保人豁免" width="100">
      <el-table-column prop="value4" label="基础服务" width="120">
      </el-table-column>
      <el-table-column prop="value5" label="入账实时活动[复制]" width="120">
      </el-table-column>
    </el-table-column>

  </el-table>
</template>
<script>
const _data = {
      "首年": {
        "10年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "62",
            "嘉多保重大疾病-入账实时活动[复制]": "2",
            "康保无忧恶性肿瘤-基础服务费": "12",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "3",
            "附加投保人豁免-基础服务费": "15",
            "附加投保人豁免-入账实时活动[复制]": "4"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "40",
            "嘉多保重大疾病-入账实时活动[复制]": "16",
            "康保无忧恶性肿瘤-基础服务费": "20",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "17",
            "附加投保人豁免-基础服务费": "15",
            "附加投保人豁免-入账实时活动[复制]": "18"
          }
        },
        "15年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "56",
            "嘉多保重大疾病-入账实时活动[复制]": "5",
            "康保无忧恶性肿瘤-基础服务费": "22",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "6",
            "附加投保人豁免-基础服务费": "21",
            "附加投保人豁免-入账实时活动[复制]": "7"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "16",
            "嘉多保重大疾病-入账实时活动[复制]": "19",
            "康保无忧恶性肿瘤-基础服务费": "18",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "20",
            "附加投保人豁免-基础服务费": "18",
            "附加投保人豁免-入账实时活动[复制]": "21"
          }
        },
        "20年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "68",
            "嘉多保重大疾病-入账实时活动[复制]": "8",
            "康保无忧恶性肿瘤-基础服务费": "34",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "9",
            "附加投保人豁免-基础服务费": "14",
            "附加投保人豁免-入账实时活动[复制]": "10"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "18",
            "嘉多保重大疾病-入账实时活动[复制]": "22",
            "康保无忧恶性肿瘤-基础服务费": "18",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "23",
            "附加投保人豁免-基础服务费": "18",
            "附加投保人豁免-入账实时活动[复制]": "24"
          }
        },
        "30年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "75",
            "嘉多保重大疾病-入账实时活动[复制]": "12",
            "康保无忧恶性肿瘤-基础服务费": "50",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "14",
            "附加投保人豁免-基础服务费": "30",
            "附加投保人豁免-入账实时活动[复制]": "15"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "18",
            "嘉多保重大疾病-入账实时活动[复制]": "25",
            "康保无忧恶性肿瘤-基础服务费": "15",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "26",
            "附加投保人豁免-基础服务费": "15",
            "附加投保人豁免-入账实时活动[复制]": "28"
          }
        }
      },
      "次年": {
        "10年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "8",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "3",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "8",
            "附加投保人豁免-入账实时活动[复制]": "null"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "7",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "3",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "8",
            "附加投保人豁免-入账实时活动[复制]": "null"
          }
        },
        "15年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "13",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "1",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "14",
            "附加投保人豁免-入账实时活动[复制]": "null"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "12",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "3",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "12",
            "附加投保人豁免-入账实时活动[复制]": "null"
          }
        },
        "20年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "17",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "2",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "18",
            "附加投保人豁免-入账实时活动[复制]": "null"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "12",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "3",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "14",
            "附加投保人豁免-入账实时活动[复制]": "null"
          }
        },
        "30年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "16",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "3",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "12",
            "附加投保人豁免-入账实时活动[复制]": "null"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "15",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "2",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "15",
            "附加投保人豁免-入账实时活动[复制]": "null"
          }
        }
      },
      "第3年": {
        "30年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "3",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "4",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "3",
            "附加投保人豁免-入账实时活动[复制]": "null"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "3",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "3",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null"
          }
        }
      },
      "第4年": {
        "30年缴": {
          "至70岁 ": {
            "嘉多保重大疾病-基础服务费": "3",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "4",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null",
            "附加投保人豁免-基础服务费": "4",
            "附加投保人豁免-入账实时活动[复制]": "null"
          },
          "终身 ": {
            "嘉多保重大疾病-基础服务费": "4",
            "嘉多保重大疾病-入账实时活动[复制]": "null",
            "康保无忧恶性肿瘤-基础服务费": "4",
            "康保无忧恶性肿瘤-入账实时活动[复制]": "null"
          }
        }
      }
    }
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
      return {
        tableData:[],
        mergeData: {},
        //合并行的记录
        mergePos: {},
        //mergeData中每项的索引
        mergeProp: ['name', 'proportion', 'ingredients'],
        mergeKeys: ['nameId', 'proportionId', 'ingredientsId'],
      }
    },
    created(){
      Object.keys(_data).map((key,a_index) => {
        let _item = _data[key];
        Object.keys(_item).map((_k,b_index) => {
          let _citem = _item[_k]
          Object.keys(_citem).map((_d,c_index) => {
            let _ditem = _citem[_d]
            var data = {
                nameId:a_index + 1,
                proportionId:b_index + 1,
                ingredientsId:c_index + 1,
                name:key,
                proportion:_k,
                ingredients:_d
              }

            Object.keys(_ditem).map((_i,index) => {
              data['value'+(index + 1)] = _ditem[_i] == 'null' ? '' : _ditem[_i]
            })
            this.tableData.push(data)
          })
        })
      })
      this.getSpanArr(this.tableData, this.mergeKeys)
    },
  methods:{
    getSpanArr(tableData, keyName) {
      console.log(tableData,keyName,333);
      keyName.forEach((kitem, k) =>{
        console.log(k,3);
        tableData.forEach((data, i) =>{
          if (i === 0) {
            this.mergeData[kitem] = this.mergeData[kitem] || []
            this.mergeData[kitem].push(1) 
            this.mergePos[kitem] = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[kitem] === tableData[i - 1][kitem]) {
              this.mergeData[kitem][this.mergePos[kitem]] += 1
              this.mergeData[kitem].push(0)
            } else {
              this.mergeData[kitem].push(1) 
              this.mergePos[kitem] = i
            }
          }
        })
      }) 
      console.log(this.mergeData,2) 
      console.log(this.mergePos,1)
    },
    spanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      console.log(row,column,columnIndex);
      if (this.mergeProp.includes(column.property)) {
        console.log(column.property,333);
        const _row = this.mergeData[column.property + 'Id'][rowIndex] 
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
    //第一个代表rowspan 行，第二个代表colspan 列
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
a {
  color: #42b983;
}

* {
  padding: 0;
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

table {
  margin: 100px auto;
  border-collapse: collapse;
  border: 1px solid #ddd;
  ;
}

.td {
  width: 140px;
  padding: 10px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.dl,
.dd {
  display: flex;
  line-height: 25px;
}

.dd .td:last-child{
  border-right:none;
}
.list:last-child .dl:last-child .td{
  border-bottom:none;
}
.th_b th{
  padding: 10px;
}
.th_b th{
  border-right: 1px solid #ddd;
}
.th_b th:last-child{
  border-right:none;
}

.table_a tbody tr {
    border: 1px solid #e8e8e8;
}
</style>
